<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<input type="text" v-model="msg">
		<div>{{msg | upper}}</div>
		<div>{{msg | lower}}</div>
		<div :abc="msg | upper"> 测试数据 </div>
	</div>
	<script src="./js/vue.js" type="text/javascript" charset="utf-8" ></script>
	<script type="text/javascript">
		/**
			Vue过滤器
		*/
		// Vue.filter('upper', function(val) {
		// 	// 业务流程
		// 	// 一个简单的字符串的拼接，获取到字符串的首字母转换成大写的， 然后再拼接剩下的字符串
		// 	return val.charAt(0).toUpperCase() + val.slice(1)
		// })
		Vue.filter('lower', function(val) {
			// 业务流程
			// 一个简单的字符串的拼接，获取到字符串的首字母转换成大写的， 然后再拼接剩下的字符串
			return val.charAt(0).toLowerCase() + val.slice(1)
		})
		var vm = new Vue({
			el: "#app",
			data: {
				msg: ''
			},
			filters:{
				 upper: function(val) {
				 	return val.charAt(0).toUpperCase() + val.slice(1)
				}
			}
		});
	</script>
</body>
</html>